<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#bar{
		width: 1200px;
		height:800px;
		margin:20px auto 0;
	}
	#weeks,#years{
		display: inline-block;
		width:100px;
		height:40px;
		border:1px solid;
		text-align: center;
		line-height: 40px;
	}
	</style>
<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
	<div style="width:1200px; margin:20px auto 0;">
       <div style="overflow:hidden; margin-bottom:40px;"></div> 
       <div id="echarts-sum" style="text-align: center; color:#61A0A8;">未实名认证订单统计表</div>
	   <div id="bar"></div>
    </div>
        
	<script type="text/javascript">
		var myBar = echarts.init(document.getElementById('bar'));
		var weekXData = [];
		var weekupData = [];
		var isTime="";
		option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#999'
		            }
		        }
		    },
		    toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar']},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    legend: {
		        data:['未实名认证订单']
		    },
		    xAxis: [
		        {
		            type: 'category',
		          
		             axisLabel : {
		                interval:0,
		                rotate:"45"
		            }
		        }
		    ],
		    grid:{//直角坐标系内绘图网格
            show:true,//是否显示直角坐标系网格。[ default: false ]
            bottom:"25%" //
        },
		    yAxis: [
		        {
		            type: 'value',
		            name: '未实名认证订单统计表',
		            axisLabel: {
		                formatter: '{value}'
		            }
		        }
		    ],
		    series: [
		        {
		            name:'未实名认证订单',
		            type:'bar',
		            barWidth: 30
		        }   
		    ]
		};

		$.ajax({
		        url: '../statis/getRealNameStatisticsChart.htm',
		        type: 'post',
		        dataType:'json',
		        success: function (result) {
				        		var data=result.data;
				        		/* for(var i=0;i<15;i++){
				        			var arr = data;   //一个存储对象的数组   两个属性  分别为key  value

				        			function compare(pro) { 
				        			    return function (obj1, obj2) { 
				        			        var val1 = obj1[pro]; 
				        			        var val2 = obj2[pro]; 
				        			        if (val1 < val2 ) { //正序
				        			            return 1; 
				        			        } else if (val1 > val2 ) { 
				        			            return -1; 
				        			        } else { 
				        			            return 0; 
				        			        } 
				        			    } 
				        			} 
				        			//使用方法 
				        			arr.reverse(arr.sort(compare("notAuth"))); 
		                        weekXData.push(arr[i].comnumName); 
		                        weekupData.push(arr[i].notAuth); 
			        	}  */
			        		if(data.length>15){
			        			for(var i=0;i<15;i++){
			                        weekXData.push(data[i].comnumName); 
			                        weekupData.push(data[i].notAuth); 
				        	} 
			        		}else{
			        			for(var i=0;i<data.length;i++){
			                        weekXData.push(data[i].comnumName); 
			                        weekupData.push(data[i].notAuth); 
				        	} 
			        		}
				        		
			        		option.xAxis[0].data = weekXData;
							option.series[0].data = weekupData;
							myBar.setOption(option);
			        }
		 });
		 myBar.clear();
		 myBar.setOption(option,true);
	</script>
</body>
</html>